<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>乾坤八卦风水罗盘旋转CSS3动画</title>
</head>
<body>
<div class="compass-main">
    <div class="compassdiv">
        <div class="compass-c"></div>
        <div class="compass w h">
            <div class="compass-1 w h"></div>
            <div class="compass-2 w h"></div>
            <div class="compass-3 w h"></div>
            <div class="compass-4 w h"></div>
            <div class="compass-5 w h"></div>
            <div class="compass-6 w h"></div>
            <div class="compass-7 w h"></div>
            <div class="compass-8 w h"></div>
            <div class="compass-9 w h"></div>
            <div class="compass-10 w h"></div>
            <div class="compass-11 w h"></div>
            <div class="compass-12 w h"></div>
            <div class="compass-13 w h"></div>
            <div class="compass-14 w h"></div>
            <div class="compass-15 w h"></div>
            <div class="compass-16 w h"></div>
            <div class="compass-17 w h"></div>
            <div class="compass-18 w h"></div>
            <div class="compass-19 w h"></div>
        </div>
    </div>
</div>
</body>
<style>
    /* CSS Document */
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    body {
        min-width: 1190px;
        background-color: #000002;
    }

    a {
        text-decoration: none;
    }

    img {
        border: none;
    }

    .w {
        width: 700px;
    }

    .h {
        height: 700px;
    }

    .compass-main {
        width: 100%;
        height: 800px;
        background-color: #000002;
    }

    .compassdiv {
        width: 1190px;
        height: 800px;
        margin: 0 auto;
        background-image: url(../images/compass/c-a-bj.jpg);
        position: relative;
    }

    .compassdiv .compass-c {
        width: 1190px;
        height: 800px;
        background-image: url(../images/compass/c-a-c.png);
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 100;
    }

    @-moz-keyframes rotate {
        100% {
            -moz-transform: rotate(0deg);
        }
        100% {
            -moz-transform: rotate(360deg);
        }
    }

    @-webkit-keyframes rotate {
        100% {
            -webkit-transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
        }
    }

    @keyframes rotate {
        100% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    .compassdiv .compass {
        background-image: url(../images/compass/c-a-0.png);
        position: absolute;
        top: 40px;
        left: 160px;
        z-index: 1;
    }

    .compassdiv .compass .compass-1 {
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 2;
        filter: alpha(opacity=100);
        -moz-opacity: 1;
        opacity: 1;
        background: no-repeat url("../images/compass/c-a-1.png") left top;
        -webkit-background-size: 700px 350px;
        -moz-background-size: 700px 350px;
        background-size: 700px 700px;
        -webkit-border-radius: 350px;
        border-radius: 350px;
        -moz-transition: all .1s;
        -webkit-transition: all .1s;
        transition: all .1s;
        -moz-animation: rotate 1s infinite linear;
        -webkit-animation: rotate 1s infinite linear;
        animation: rotate 1s infinite linear;
    }

    .compassdiv .compass .compass-2 {
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 3;
        filter: alpha(opacity=100);
        -moz-opacity: 1;
        opacity: 1;
        background: no-repeat url("../images/compass/c-a-2.png") left top;
        -webkit-background-size: 700px 350px;
        -moz-background-size: 700px 350px;
        background-size: 700px 700px;
        -webkit-border-radius: 350px;
        border-radius: 350px;
        -moz-transition: all .5s;
        -webkit-transition: all .5s;
        transition: all .5s;
        -moz-animation: rotate 5s infinite linear;
        -webkit-animation: rotate 5s infinite linear;
        animation: rotate 5s infinite linear;
        -webkit-transform: rotateZ(720deg);
        -moz-transform: rotateZ(720deg);
        -o-transform: rotateZ(720deg);
        -ms-transform: rotateZ(720deg);
        transform: rotateZ(720deg);
    }

    .compassdiv .compass .compass-3 {
        background-image: url(../images/compass/c-a-3.png);
        position: absolute;
        z-index: 4;
        filter: alpha(opacity=90);
        -moz-opacity: 0.9;
        opacity: 0.9;
        -webkit-background-size: 700px 350px;
        -moz-background-size: 700px 350px;
        background-size: 700px 700px;
        -webkit-border-radius: 350px;
        border-radius: 350px;
        -moz-transition: all .25s;
        -webkit-transition: all .25s;
        transition: all .25s;
        -moz-animation: rotate 25s infinite linear;
        -webkit-animation: rotate 25s infinite linear;
        animation: rotate 25s infinite linear;
    }

    .compassdiv .compass .compass-4 {
        background-image: url(../images/compass/c-a-4.png);
        position: absolute;
        z-index: 5;
    }

    .compassdiv .compass .compass-5 {
        background-image: url(../images/compass/c-a-5.png);
        position: absolute;
        z-index: 5;
        filter: alpha(opacity=100);
        -moz-opacity: 1;
        opacity: 1;
        -webkit-background-size: 700px 350px;
        -moz-background-size: 700px 350px;
        background-size: 700px 700px;
        -webkit-border-radius: 350px;
        border-radius: 350px;
        -moz-transition: all .55s;
        -webkit-transition: all .55s;
        transition: all .55s;
        -moz-animation: rotate 55s infinite linear;
        -webkit-animation: rotate 55s infinite linear;
        animation: rotate 55s infinite linear;
    }

    .compassdiv .compass .compass-6 {
        background-image: url(../images/compass/c-a-6.png);
        position: absolute;
        z-index: 6;
        filter: alpha(opacity=100);
        -moz-opacity: 1;
        opacity: 1;
        -webkit-background-size: 700px 350px;
        -moz-background-size: 700px 350px;
        background-size: 700px 700px;
        -webkit-border-radius: 350px;
        border-radius: 350px;
        -moz-transition: all .55s;
        -webkit-transition: all .55s;
        transition: all .55s;
        -moz-animation: rotate 55s infinite linear;
        -webkit-animation: rotate 55s infinite linear;
        animation: rotate 55s infinite linear;
    }

    .compassdiv .compass .compass-7 {
        background-image: url(../images/compass/c-a-7.png);
        position: absolute;
        z-index: 7;
        filter: alpha(opacity=100);
        -moz-opacity: 1;
        opacity: 1;
        -webkit-background-size: 700px 350px;
        -moz-background-size: 700px 350px;
        background-size: 700px 700px;
        -webkit-border-radius: 350px;
        border-radius: 350px;
        -moz-transition: all .35s;
        -webkit-transition: all .35s;
        transition: all .35s;
        -moz-animation: rotate 35s infinite linear;
        -webkit-animation: rotate 35s infinite linear;
        animation: rotate 35s infinite linear;
    }

    .compassdiv .compass .compass-8 {
        background-image: url(../images/compass/c-a-8.png);
        position: absolute;
        z-index: 8;
        filter: alpha(opacity=100);
        -moz-opacity: 1;
        opacity: 1;
        -webkit-background-size: 700px 350px;
        -moz-background-size: 700px 350px;
        background-size: 700px 700px;
        -webkit-border-radius: 350px;
        border-radius: 350px;
        -moz-transition: all .25s;
        -webkit-transition: all .25s;
        transition: all .25s;
        -moz-animation: rotate 25s infinite linear;
        -webkit-animation: rotate 25s infinite linear;
        animation: rotate 25s infinite linear;
        -webkit-transform: rotateZ(720deg);
        -moz-transform: rotateZ(720deg);
        -o-transform: rotateZ(720deg);
        -ms-transform: rotateZ(720deg);
        transform: rotateZ(720deg);
    }

    .compassdiv .compass .compass-9 {
        background-image: url(../images/compass/c-a-9.png);
        position: absolute;
        z-index: 9;
        filter: alpha(opacity=100);
        -moz-opacity: 1;
        opacity: 1;
        -webkit-background-size: 700px 350px;
        -moz-background-size: 700px 350px;
        background-size: 700px 700px;
        -webkit-border-radius: 350px;
        border-radius: 350px;
        -moz-transition: all .45s;
        -webkit-transition: all .45s;
        transition: all .45s;
        -moz-animation: rotate 45s infinite linear;
        -webkit-animation: rotate 45s infinite linear;
        animation: rotate 45s infinite linear;
    }

    .compassdiv .compass .compass-10 {
        background-image: url(../images/compass/c-a-10.png);
        position: absolute;
        z-index: 10;
    }

    .compassdiv .compass .compass-11 {
        background-image: url(../images/compass/c-a-11.png);
        position: absolute;
        z-index: 11;
        filter: alpha(opacity=100);
        -moz-opacity: 1;
        opacity: 1;
        -webkit-background-size: 700px 350px;
        -moz-background-size: 700px 350px;
        background-size: 700px 700px;
        -webkit-border-radius: 350px;
        border-radius: 350px;
        -moz-transition: all .55s;
        -webkit-transition: all .55s;
        transition: all .55s;
        -moz-animation: rotate 55s infinite linear;
        -webkit-animation: rotate 55s infinite linear;
        animation: rotate 55s infinite linear;
        -webkit-transform: rotateZ(720deg);
        -moz-transform: rotateZ(720deg);
        -o-transform: rotateZ(720deg);
        -ms-transform: rotateZ(720deg);
        transform: rotateZ(720deg);
    }

    .compassdiv .compass .compass-12 {
        background-image: url(../images/compass/c-a-12.png);
        position: absolute;
        z-index: 12;
        filter: alpha(opacity=100);
        -moz-opacity: 1;
        opacity: 1;
        -webkit-background-size: 700px 350px;
        -moz-background-size: 700px 350px;
        background-size: 700px 700px;
        -webkit-border-radius: 350px;
        border-radius: 350px;
        -moz-transition: all .45s;
        -webkit-transition: all .45s;
        transition: all .45s;
        -moz-animation: rotate 45s infinite linear;
        -webkit-animation: rotate 45s infinite linear;
        animation: rotate 45s infinite linear;
    }

    .compassdiv .compass .compass-13 {
        background-image: url(../images/compass/c-a-13.png);
        position: absolute;
        z-index: 13;
        filter: alpha(opacity=100);
        -moz-opacity: 1;
        opacity: 1;
        -webkit-background-size: 700px 350px;
        -moz-background-size: 700px 350px;
        background-size: 700px 700px;
        -webkit-border-radius: 350px;
        border-radius: 350px;
        -moz-transition: all .35s;
        -webkit-transition: all .35s;
        transition: all .35s;
        -moz-animation: rotate 35s infinite linear;
        -webkit-animation: rotate 35s infinite linear;
        animation: rotate 35s infinite linear;
        -webkit-transform: rotateZ(720deg);
        -moz-transform: rotateZ(720deg);
        -o-transform: rotateZ(720deg);
        -ms-transform: rotateZ(720deg);
        transform: rotateZ(720deg);
    }

    .compassdiv .compass .compass-14 {
        background-image: url(../images/compass/c-a-14.png);
        position: absolute;
        z-index: 14;
        filter: alpha(opacity=100);
        -moz-opacity: 1;
        opacity: 1;
        -webkit-background-size: 700px 350px;
        -moz-background-size: 700px 350px;
        background-size: 700px 700px;
        -webkit-border-radius: 350px;
        border-radius: 350px;
        -moz-transition: all .25s;
        -webkit-transition: all .25s;
        transition: all .25s;
        -moz-animation: rotate 25s infinite linear;
        -webkit-animation: rotate 25s infinite linear;
        animation: rotate 25s infinite linear;
    }

    .compassdiv .compass .compass-15 {
        background-image: url(../images/compass/c-a-15.png);
        position: absolute;
        z-index: 15;
        filter: alpha(opacity=100);
        -moz-opacity: 1;
        opacity: 1;
        -webkit-background-size: 700px 350px;
        -moz-background-size: 700px 350px;
        background-size: 700px 700px;
        -webkit-border-radius: 350px;
        border-radius: 350px;
        -moz-transition: all .3s;
        -webkit-transition: all .3s;
        transition: all .3s;
        -moz-animation: rotate 3s infinite linear;
        -webkit-animation: rotate 3s infinite linear;
        animation: rotate 3s infinite linear;
        -webkit-transform: rotateZ(720deg);
        -moz-transform: rotateZ(720deg);
        -o-transform: rotateZ(720deg);
        -ms-transform: rotateZ(720deg);
        transform: rotateZ(720deg);
    }

    .compassdiv .compass .compass-16 {
        background-image: url(../images/compass/c-a-16.png);
        position: absolute;
        z-index: 16;
        filter: alpha(opacity=100);
        -moz-opacity: 1;
        opacity: 1;
        -webkit-background-size: 700px 350px;
        -moz-background-size: 700px 350px;
        background-size: 700px 700px;
        -webkit-border-radius: 350px;
        border-radius: 350px;
        -moz-transition: all .35s;
        -webkit-transition: all .35s;
        transition: all .35s;
        -moz-animation: rotate 35s infinite linear;
        -webkit-animation: rotate 35s infinite linear;
        animation: rotate 35s infinite linear;
    }

    .compassdiv .compass .compass-17 {
        background-image: url(../images/compass/c-a-17.png);
        position: absolute;
        z-index: 17;
        filter: alpha(opacity=100);
        -moz-opacity: 1;
        opacity: 1;
        -webkit-background-size: 700px 350px;
        -moz-background-size: 700px 350px;
        background-size: 700px 700px;
        -webkit-border-radius: 350px;
        border-radius: 350px;
        -moz-transition: all .15s;
        -webkit-transition: all .15s;
        transition: all .15s;
        -moz-animation: rotate 15s infinite linear;
        -webkit-animation: rotate 15s infinite linear;
        animation: rotate 15s infinite linear;
    }

    .compassdiv .compass .compass-18 {
        background-image: url(../images/compass/c-a-18.png);
        position: absolute;
        z-index: 18;
        filter: alpha(opacity=100);
        -moz-opacity: 1;
        opacity: 1;
        -webkit-background-size: 700px 350px;
        -moz-background-size: 700px 350px;
        background-size: 700px 700px;
        -webkit-border-radius: 350px;
        border-radius: 350px;
        -moz-transition: all .25s;
        -webkit-transition: all .25s;
        transition: all .25s;
        -moz-animation: rotate 25s infinite linear;
        -webkit-animation: rotate 25s infinite linear;
        animation: rotate 25s infinite linear;
        -webkit-transform: rotateZ(720deg);
        -moz-transform: rotateZ(720deg);
        -o-transform: rotateZ(720deg);
        -ms-transform: rotateZ(720deg);
        transform: rotateZ(720deg);
    }

    .compassdiv .compass .compass-19 {
        background-image: url(../images/compass/c-a-19.png);
        position: absolute;
        z-index: 19;
        filter: alpha(opacity=100);
        -moz-opacity: 1;
        opacity: 1;
        -webkit-background-size: 700px 350px;
        -moz-background-size: 700px 350px;
        background-size: 700px 700px;
        -webkit-border-radius: 350px;
        border-radius: 350px;
        -moz-transition: all .20s;
        -webkit-transition: all .20s;
        transition: all .20s;
        -moz-animation: rotate 20s infinite linear;
        -webkit-animation: rotate 20s infinite linear;
        animation: rotate 20s infinite linear;
    }

</style>
</html>

